<template>
    <div class="about">
        <h1>
            这是我写的一个打字动画插件，看过css揭秘之后，突然想自己动手实现一下，所以就用vue实现了一遍《css揭秘》中的打字动画章节
        </h1>
        <p>组件提供普通文本，及cmd命令行两种样式，并可选单行还是多行，单行模式下，一行文本动画结束后下一行会直接覆盖上一行。多行模式，将动画显示所有文本。</p>
        <a-card title="打字动画:">
            <code-box>
                if (textDom) { textDom.classList.add("typing"); 
                const len =this.getTextLength(element); 
                textDom.style.width = len + "rem";
                textDom.addEventListener("animationend", changeStyle, false);
                function changeStyle() { 
                        if (textDom) {
                            textDom.style.borderRight = "none"; 
                        } 
                    }
                }
            </code-box>
            
        </a-card>
    </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import CodeBox from '@/components/CodeBox.vue';
@Component({
    components: {
        CodeBox,
    },
})
export default class TypeAnimation extends Vue {}
</script>
